<template>
    <div class="comment-input-bar">
        <div class="comment-input-wrapper btn-block">
            <div class="comment-input">
                <img class="user-comment-avatar" :src="currentUser.icon || config.defaultImg" alt="">
                <div class="user-comment-input" @click="toComment">
                    <p class="placeholder">有什么感悟要分享吗</p>
                    <img
                        v-if="isUploadImg"
                        class="select-img-input"
                        src="~@/assets/images/select-image-icon.png"
                        alt=""
                    />
                </div>

                <van-button
                    :class="['user-comment-toggle', {'is--show-comment-toggle': isShowCommentToggle}]"
                    @click="toggle()"
                >
                    <div class="toggle-btn">
                        <i class="icon"></i>
                        <span class="text">{{ commentCount > 99 ? '99+' : commentCount }}</span>
                    </div>
                </van-button>
            </div>
        </div>

        <template v-if="hasCommentPopup">
            <div class="comment-popup-wrapper comment-bottom" v-show="state.wrapperShow">
                <van-popup
                    v-model:show="state.visible"
                    class="comment-popup"
                    overlay-class="comment-popup-overlay"
                    position="bottom"
                    closeable
                    @closed="onClosed"
                >
                    <div class="comment-count">评论 <span v-if="commentCount">{{ commentCount }}</span></div>
                    <CommentList ref="commentListRef" :is-creater="isCreater" :catalogue-id="props.catalogueId" @refresh-comment-num="getCommentCount"/>
                </van-popup>
            </div>
        </template>

        <CommentInput
            v-model:visible="commentInputState.visible"
            :maxlength="commentInputState.maxlength"
            :show-image="isUploadImg"
            :accept="commentInputState.accept"
            @submit="onCommentInputSubmit"
        />
    </div>
</template>

<script setup>
import CommentList from './../comment/comment-list.vue';
import CommentInput from './comment-input'
import {computed, onMounted, reactive, ref, watch} from 'vue';
import {useRoute} from 'vue-router';
import {useStore} from 'vuex';
// import {useGlobalZIndex} from '@/lib/hooks/use-global-z-index';
import { queryToJson } from '@/lib/tools';
import config from '@/global/config';

const props = defineProps({
    hasCommentPopup: {
        type: Boolean,
        default: false
    },
    isCreater: {
        type: Boolean,
        default: false
    },
    isUploadImg: {
        type: Boolean,
        default: false 
    },
    catalogueId: {
        type: [Number, String],
        default: ''
    }
})
const emit = defineEmits(['on-commented']);

const route = useRoute();
const store = useStore();
const currentUser = computed(() => {
    return store.state?.currentUser || {};
});

// 是否在底部输入框显示评论总数
const isShowCommentToggle = computed(() => {
    return props.hasCommentPopup && !state.visible
});

const commentListRef = ref();

/* 发布评论 */
const commentInputState = reactive({
    visible: false,
    maxlength: 500,
    // showImage: true,
    accept: 'image/png,image/jpeg,image/gif',
})
function onCommentInputSubmit(data) {
    G_transmit('saveCatalogueComment', {
        data: {
            content: data.message,
            bizId: props.catalogueId || route.query.catalogueId || '',
            parentSource: route.params.moocId,
            bizSource: 'mooc',
            serviceName: 'kms-center',
            commentLevel: 1, // 层级(1:一级评论, 2:二级评论 n:n级评论）
            parentCommentId: 0, // 父级评论ID 一级评论传0
            top: 0, // 是否置顶 0：否 1：是
            parentCommentAnonymous: 0, // 被回复的评论是否匿名 1-匿名 0-实名 
            beReplyUserId: 0, // 被回复的人的ID
            anonymous: 0 // 匿名 1-匿名 0-实名

        }
    }).then(() => {
        if (commentListRef.value) {
            commentListRef.value.refreshComments();
        }
        commentCount.value++;
        emit('on-commented');

        commentInputState.visible = false;
        G_dispatchEvent('toast', { message: '发布成功', type: 'success'});
    })
}
/* 评论 */
function toComment() {
    commentInputState.visible = true;
}

// const wrapStyle = computed(() => {
//     return {
//         zIndex: zIndex.value
//     }
// })
// const zIndex = ref(useGlobalZIndex())
const state = reactive({
    wrapperShow: false,
    visible: false
})
function toggle(visible = !state.visible) {
    state.visible = visible;

    if (visible) {
        // zIndex.value = useGlobalZIndex();
        state.wrapperShow = true;
    }
}

function onClosed() {
    state.wrapperShow = false;
}

const commentCount = ref(0);
function getCommentCount() {
    G_transmit('commentNumByCatalogue', {
        queries: {
            bizId: props.catalogueId || route.query.catalogueId || '', // 课件id
            bizSource: 'mooc', // 主体来源
            commentLevel: 1, // 层级(1:一级评论, 2:二级评论 n:n级评论）
            parentSource: route.params.moocId, // 慕课id
            parentCommentId: 0, // # 父级评论ID 一级评论传0

        }
    }).then(({data}) => {
        commentCount.value = data || 0;
    })
}
onMounted(() => {
    if (props.hasCommentPopup) {
        getCommentCount();
    }
})
</script>

<style lang="scss" scoped>
.comment-input-bar {
    .comment-input-wrapper {
        position: fixed;
        z-index: 22;
        bottom: 0;
        width: 100%;
        background: #FFF;
        box-shadow: 0px -4px 6px 0px rgba(140, 149, 179, 0.08);

        .comment-input {
            height: 48px;
            width: 100%;
            padding: 0 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .user-comment-avatar {
                flex: none;
                height: 34px;
                width: 34px;
                background: rgba(255, 0, 0, 0.1);
                margin-right: 8px;
                border-radius: 50%;
            }
            .user-comment-input {
                flex: 1;
                display: flex;
                align-items: center;
                background: #F5F5F5;
                border-radius: 18px;
                padding: 0 15px;
                height: 36px;

                .placeholder {
                    flex: 1;
                    font-size: 14px;
                    color: #A2A3A4;
                }
                .select-img-input {
                    height: 20px;
                    width: 20px;
                }
            }
            .user-comment-toggle {
                border: 0;
                padding: 0;
                height: 30px;
                margin-left: 15px;
                display: none;

                &.is--show-comment-toggle {
                    display: block;
                }

                .toggle-btn {
                    display: flex;
                    align-items: center;
                }

                .icon {
                    display: block;
                    height: 16px;
                    width: 16px;
                    margin: 2px;
                    background: url(~@/assets/images/comment/comment-icon.png) no-repeat center;
                    background-size: contain;
                }
                .text {
                    margin-left: 5px;
                    font-size: 12px;
                }
            }
        }
    }
    .comment-popup-wrapper {
        position: fixed;
        bottom: 48px;
        right: 0;
        left: 0;
        top: 210px;
        overflow: hidden;

        :deep(.comment-popup-overlay),
        :deep(.comment-popup) {
            position: absolute;
            height: 100%;
            overflow: hidden;
        }
        :deep(.van-popup__close-icon) {
            color: #000;
            font-size: 18px;
            margin-top: 3px;
        }

        .comment-count {
            font-size: 16px;
            line-height: 24px;
            font-weight: 600;
            color: #171A1D;
            display: flex;
            align-items: center;
            padding: 20px 15px 0;
            font-family: PingFangSC-Semibold, PingFang SC;
            // height: 44px;
            span {
                margin-left: 4px;
            }
        }

        .comments {
            height: calc(100% - 44px);
            // height: 100%;
            overflow-y: auto;
        }
    }
}
</style>